<template>
  <a-card class="card" :bordered="false">
    <div class="manage-template">
      <header>
        <div class="manage-template-tab">
          <a class="lou-btn receipt" :class="{'active':showtab==1}" @click="changeTab(1)">收款票据</a>
          <a class="lou-btn refund" :class="{'active':showtab==2}" @click="changeTab(2)">退款票据</a>
        </div>
      </header>
      <div class="manage-template-content">
        <div class="receipt-template" v-show="showtab==1">
          <h3>默认模板</h3>
          <p>
            <input type="radio" name="receipt_default" id="default-template" value="41" checked />
            <label for="default-template" class="default">已使用当前模板</label>
          </p>
          <div class="template-wrapper">
            <a href="/lllw/bill_template/edit/id/41.html" class="edit-template-btn"></a>

            <div class="template-left"></div>
            <div class="template-inner">
              <dl
                class="template-number"
                style="top: 23px; left: 588px; width:150px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>票据号：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-date"
                style="top: 50px; left: 0px; width:130px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>日期：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-title"
                style="top: 19px; left: 10px; width:588px; height: 20px;is_bold:1;font-size: 18px;text-align: center"
              >
                <dt></dt>
                <dd data-value>下洲花园收款票据</dd>
              </dl>
              <dl
                class="template-house"
                style="top: 50px; left: 216px; width:130px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>房屋：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-owner"
                style="top: 50px; left: 408px; width:330px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>业主姓名：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-receiver"
                style="top: 190px; left: 362px; width:130px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>收款人：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-type"
                style="top: 190px; left: 556px; width:130px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>收款方式：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-seal"
                style="top: 190px; left: 0px; width:130px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>单位印章：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-account"
                style="top:190px;left:188px; width:130px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>出纳：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-remarks"
                style="top: 207px; left: 0px; width:130px; height: 14px;is_bold:2;font-size: 12px"
              >
                <dt>备注：</dt>
                <dd></dd>
              </dl>

              <table cellspacing="0">
                <thead>
                  <tr>
                    <th>收费项目</th>
                    <th>交款区间</th>
                    <th>缴费单价（元）</th>
                    <th>金额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>物业费</td>
                    <td>2018.02.06-2019.04.06</td>
                    <td>1.2元/月/平方</td>
                    <td>¥276.00</td>
                  </tr>
                  <tr>
                    <td>物业费</td>
                    <td>2018.02.06-2019.04.06</td>
                    <td>1.2元/月/平方</td>
                    <td>¥276.00</td>
                  </tr>
                  <tr>
                    <td>合计</td>
                    <td colspan="2">伍佰伍拾贰元整</td>
                    <td>¥552.00</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="template-right"></div>
          </div>
          <a href="/lllw/bill_template/add.html" class="lou-btn">新增票据</a>
        </div>
        <div class="refund-template" v-show="showtab==2">
          <h3>退款默认票据</h3>
          <p>
            <input type="radio" name="refund_default" id="refund_default" checked />
            <label for="refund_default">设为使用模板</label>
          </p>
          <div class="template-wrapper">
            <a href="javascript:;" class="edit-template-btn"></a>
            <a href="javascript:;" class="delete-template-btn"></a>
            <div class="template-left"></div>
            <div class="template-inner">
              <dl
                class="template-title"
                style="top: 19px; left: 290px; width: 144px; height: 20px;"
              >
                <dt></dt>
                <dd data-value="高新慧园缴费票据">高新慧园缴费票据</dd>
              </dl>
              <dl
                class="template-number"
                style="top: 23px; left: 560px; width: 130px; height: 14px;"
              >
                <dt>票据号：</dt>
                <dd>XCGA001267</dd>
              </dl>
              <dl class="template-date" style="top: 50px; left: 0; width: 130px; height: 14px;">
                <dt>日期：</dt>
                <dd>2019年01月04日</dd>
              </dl>
              <dl
                class="template-house"
                style="top: 50px; left: 216px; width: 130px; height: 14px;"
              >
                <dt>房屋：</dt>
                <dd>1栋-1单元-303</dd>
              </dl>
              <dl
                class="template-owner"
                style="top: 50px; left: 408px; width: 130px; height: 14px;"
              >
                <dt>业主姓名：</dt>
                <dd>阳东升 王江桂</dd>
              </dl>
              <dl class="template-seal" style="top: 190px; left: 0; width: 130px; height: 14px;">
                <dt>单位印章：</dt>
                <dd></dd>
              </dl>
              <dl
                class="template-account"
                style="top: 190px; left: 188px; width: 130px; height: 14px;"
              >
                <dt>出纳：</dt>
                <dd>王宇</dd>
              </dl>
              <dl
                class="template-receiver"
                style="top: 190px; left: 362px; width: 130px; height: 14px;"
              >
                <dt>收款人：</dt>
                <dd>杨正亚</dd>
              </dl>
              <dl
                class="template-type"
                style="top: 190px; left: 556px; width: 130px; height: 14px;"
              >
                <dt>收款方式：</dt>
                <dd>现金</dd>
              </dl>
              <dl
                class="template-remarks"
                style="top: 210px; left: 0px; width: 130px; height: 14px;"
              >
                <dt>备注：</dt>
                <dd></dd>
              </dl>
              <table cellspacing="0">
                <thead>
                  <tr>
                    <th>收费项目</th>
                    <th>交款区间</th>
                    <th>缴费单价（元）</th>
                    <th>金额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>物业费</td>
                    <td>2018.02.06-2019.04.06</td>
                    <td>1.2元/月/平方</td>
                    <td>¥276.00</td>
                  </tr>
                  <tr>
                    <td>物业费</td>
                    <td>2018.02.06-2019.04.06</td>
                    <td>1.2元/月/平方</td>
                    <td>¥276.00</td>
                  </tr>
                  <tr>
                    <td>物业费</td>
                    <td>2018.02.06-2019.04.06</td>
                    <td>1.2元/月/平方</td>
                    <td>¥276.00</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="template-right"></div>
          </div>
          <a href="/lllw/bill_template/add.html" class="lou-btn">新增票据</a>
        </div>
      </div>
    </div>
  </a-card>
</template>
<script>
export default {
  name: 'FeeTemplate',
  data () {
    return {
      showtab: 1
    }
  },
  methods: {
    changeTab (item) {
      this.showtab = item
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  margin-bottom: 24px;
}
.manage-template {
  position: relative;
  padding: 130px 20px 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.manage-template .edit-template-table {
  position: absolute;
  top: 570px;
  left: 20px;
  right: 20px;
  bottom: 0;
  overflow-x: auto;
}

.manage-template .edit-table-header {
  position: absolute;
  top: 530px;
  left: 20px;
  right: 20px;
}

.manage-template .edit-table-header th {
  height: 40px;
  background-color: #f8f7fa;
  color: #8c8b93;
  font-weight: normal;
}

.manage-template .edit-template-table table td {
  text-align: center;
  height: 50px;
  border-bottom: 1px solid #e5e1ec;
}

.manage-template .edit-template-table table td a.delete-btn {
  display: inline-block;
  width: 50px;
  height: 22px;
  line-height: 22px;
  background-color: #e24d4d;
  border-radius: 2px;
  font-family: MicrosoftYaHei;
  font-size: 12px;
  color: #ffffff;
}

.manage-template .edit-template-table table td input {
  width: 80%;
  height: 26px;
  text-align: center;
}

.manage-template .edit-template-table table td select {
  width: 46px;
  height: 26px;
  border: solid 1px #e4e4e4;
}

.manage-template header {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
}

.manage-template .manage-template-tab {
  padding: 24px 0;
  font-size: 0;
  border-top: 1px solid #e6e6e6;
}

.manage-template .manage-template-content {
  height: 100%;
  overflow-y: auto;
}

.manage-template .manage-template-tab a {
  font-size: 14px;
  color: #787878;
  letter-spacing: 2px;
  border: solid 1px #ffaf14;
  background-color: #fff;
}

.manage-template .manage-template-tab a:last-child {
  border-left: 0;
}

.manage-template .manage-template-tab a.active {
  background-color: #ffaf14;
  color: #513500;
}

.manage-template .manage-template-content h3 {
  margin-bottom: 24px;
  font-family: MicrosoftYaHei-Bold;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.manage-template .manage-template-content p {
  margin: 24px 0;
  position: relative;
}

.manage-template .manage-template-content p input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.manage-template .manage-template-content p input:checked + label {
  background-image: url(../../assets/images/checked-radio.png);
}

.manage-template .manage-template-content p label {
  padding-left: 22px;
  background-repeat: no-repeat;
  background-image: url(../../assets/images/unchecked-radio.png);
  background-position: left center;
  cursor: pointer;
}

.manage-template .manage-template-content dl.edit-template-name {
  padding-bottom: 24px;
  display: flex;
}

.manage-template .manage-template-content dl.edit-template-name dt {
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.manage-template .manage-template-content dl.edit-template-name dd input {
  padding: 0 10px;
  width: 211px;
  height: 36px;
  background-color: #fcfcfc;
  border-radius: 2px 0px 0px 2px;
  border: solid 1px #e5e1ec;
}

.manage-template .manage-template-content .lou-btn {
  font-size: 14px;
  background-repeat: no-repeat;
  background-position: 10px center;
}

.manage-template .manage-template-content .lou-btn.add-new-editrow {
  padding-left: 28px;
  text-align: left;
  background-image: url(/images/charge-add-ico.png);
}
.manage-template .template-wrapper {
  position: relative;
  display: flex;
  margin-bottom: 24px;
  padding: 0 16px;
  width: 908px;
  box-shadow: 0px 7px 16px 0px rgba(171, 171, 171, 0.23);
  border-radius: 4px;
  border: solid 1px #e6e6e6;
}

.manage-template .template-wrapper .edit-template-btn,
.manage-template .template-wrapper .delete-template-btn {
  position: absolute;
  right: 29px;
  top: -20px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-image: url(../../assets/images/edit-template.png);
}

.manage-template .refund-template .template-wrapper .edit-template-btn {
  right: 78px;
}

.manage-template .refund-template .template-wrapper .delete-template-btn,
.manage-template .template-wrapper .delete-template-btn {
  background-image: url(../../assets/images/delete-template.png);
}

.manage-template .template-wrapper .relate-a-pos,
.manage-template .template-wrapper .relate-b-pos {
  position: absolute;
  left: 74px;
  top: -10px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(../../assets/images/point-a.png);
  z-index: 990;
}

.manage-template .template-wrapper .relate-b-pos {
  top: 163px;
  background-image: url(../../assets/images/point-b.png);
}

.manage-template .template-wrapper .template-left {
  margin-right: 34px;
  width: 34px;
  background-image: url(../../assets/images/left-template-line.png);
  background-position: left 15px;
}

.manage-template .template-wrapper .template-right {
  margin-left: 34px;
  width: 34px;
  background-image: url(../../assets/images/right-template-line.png);
  background-position: left 15px;
}

.manage-template .template-wrapper .template-inner {
  flex: 1;
  position: relative;
  padding: 73px 0;
  overflow: block;
}

.manage-template .template-wrapper .template-inner dl.template-title dt,
.manage-template .template-wrapper .template-inner dl.template-title dd {
  font-family: MicrosoftYaHei-Bold;
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
}

.manage-template .template-wrapper .template-inner dl {
  position: absolute;
  display: flex;
  overflow: hidden;
}

.manage-template .template-wrapper .template-inner dt,
.manage-template .template-wrapper .template-inner dd {
  font-size: 12px;
  word-break: break-all;
}

.manage-template .template-wrapper .template-inner dd {
  flex: 1;
}

.manage-template .template-wrapper .template-inner table {
  width: 100%;
}

.manage-template .template-wrapper .template-inner table tr td,
.manage-template .template-wrapper .template-inner table tr th {
  height: 26px;
  text-align: center;
  border-top: solid 1px #000000;
  border-left: solid 1px #000000;
}

.manage-template .template-wrapper .template-inner table tr td:last-child,
.manage-template .template-wrapper .template-inner table tr th:last-child {
  border-right: solid 1px #000000;
}

.manage-template .template-wrapper .template-inner table tr:last-child td {
  border-bottom: solid 1px #000000;
}

.template-mask {
  padding: 0 30px 22px;
  width: 388px;
}

.template-mask header {
  padding-top: 130px;
  height: auto;
  line-height: normal;
  text-align: center;
  border-bottom: none;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  background-repeat: no-repeat;
  background-image: url(../../assets/images/mask-delete-btn.png);
  background-position: center top 34px;
}

.template-mask section p {
  margin-top: 13px;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #787878;
}

.template-mask footer {
  margin-top: 25px;
}

.footer-cont .bt {
  text-align: center;
  display: inline-block;
}
.footer-cont .btl {
  margin-left: 10px;
}

.footer-cont select {
  width: 150px;
  height: 26px;
  border: solid 1px #e4e4e4;
}

.footer-cont input {
  width: 150px;
  height: 26px;
  border: solid 1px #e4e4e4;
}

.footer-cont .comu {
  margin-left: -40px;
  margin-right: 20px;
}

.footer-cont .mar-lef {
  margin-left: 20px;
  margin-right: 10px;
}

.footer-cont .width_set {
  width: 100px;
  padding: 0 38px 0 10px;
}
</style>
